<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card>
        <el-tabs>
          <!-- 放置页签 -->
          <el-tab-pane label="角色管理">
            <!-- 新增角色按钮 -->
            <el-row style="height:60px">
              <el-button
                icon="el-icon-plus"
                size="small"
                type="primary"
                @click="hAdd"
              >新增角色</el-button>
            </el-row>
            <!-- 表格 -->
            <!-- 新增弹框 -->
              <el-dialog :title="isEdit?'编辑角色':'新增角色'" 
                :close-on-click-modal="false"
                :close-on-press-escape="false"
                :visible.sync="showDialog">
                <el-form ref="roleForm" :model="roleForm" :rules="rules" label-width="100px">
                  <el-form-item label="角色名称" prop="name">
                    <el-input v-model="roleForm.name" />
                  </el-form-item>
                  <el-form-item label="角色描述" prop="description">
                    <el-input v-model="roleForm.description" />
                  </el-form-item>
                </el-form>
                <!-- 底部 -->
                <el-row slot="footer" type="flex" justify="center">
                  <el-col :span="6">
                    <el-button size="small" @click="hclick">取消</el-button>
                    <el-button size="small" type="primary" @click="hSubmit">确定</el-button>
                  </el-col>
                </el-row>
              </el-dialog>
            <!-- 双向绑定 数据  :data="rolesList"-->
            <el-table :data="rolesList">  
              <el-table-column label="序号" width="120" type="index"/>
              <el-table-column label="角色名称" width="240" prop="name"/>
              <el-table-column label="描述" prop="description"/>
              <el-table-column label="操作">
                <template #default="{row}">
                  <el-button size="small" type="success">分配权限</el-button>
                  <el-button size="small" type="primary" @click="hEdit(row.id)">编辑</el-button>
                  <el-button size="small" type="danger" @click="hDel(row.id)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>

            
            <el-row type="flex" justify="center" align="middle" style="height: 60px">
              <!-- 分页组件 -->
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="pageParams.page"
                :page-sizes="[2, 4, 10, 20]"
                :page-size="pageParams.pagesize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
          </el-pagination>
            </el-row>
          </el-tab-pane>
        </el-tabs>
      </el-card>
    </div>
  </div>
</template>
<script>
import { getRoles,deleteRole ,addRole,updateRole,getRolesDetail} from "@/api/setting";
export default {
  data(){
    return{
    isEdit:false,
    showDialog:false,
    total: 0, // 总的数据条数
    rolesList:[],  //保存角色列表  
    pageParams: {
       page: 1, // 查询第一页
       pagesize: 2 // 每页两条  --- 要与pagination中page-size一致
     },
     roleForm:{
      name: '',
      description: ''
    },
    rules:{
      name: [{ required: true, message: '角色名称不能为空', trigger: 'blur' }],
      description:[{ required: true, message: '角色描述不能为空', trigger: 'blur' }]
    }  }  },
  // 页面加载渲染数据
  created(){
    this. loadRoles()
  },
  methods:{
    // 弹窗的取消按钮
    hclick(){
      this.showDialog=false
      this.resetForm()
    },

      // 封装重置表单函数
      resetForm(){
        this.$refs.roleForm.resetFields()
      },
    // 新增按钮的点击事件
    hAdd(){
      // 弹窗显示,切换为新增表单
      this.showDialog=true
      this.isEdit=false
    },
    // 自定义一个编辑函数  发送编辑角色信息
     async doEdit(){
      try {
         const res = await updateRole(this.roleForm)
         console.log('updateRole', res)
         if(res.code!==10000) return this.$message.error(res.message)
          this.$message.success(res.message)
         // 重新渲染页面
         this.loadRoles()
        //  关闭弹窗
        this.showDialog=false
         
       } catch (err) {
         console.log('updateRole', err)
       }
     },
    // 编辑按钮
    hEdit(id){
      //  点击编辑  显示弹窗,  切换为编辑表单   调用发送请求
      this.showDialog=true
      this.isEdit=true
      this.getDetail(id)

    },
    // 自定义一个编辑函数  编辑角色
    async getDetail(id){
      try {
        const res = await getRolesDetail(id)
        console.log('getRolesDetail', res)
        if(res.code!==10000) return this.$message.error(res.message)
        this.$message.success(res.message)
        this.roleForm=res.data
        // 保存数据
      } catch (err) {
        console.log('getRolesDetail', err)
      }
    },
    // 确认添加   
    hSubmit(){
      // 提交前得兜底校验
      this.$refs.roleForm.validate((valid)=>{
        if(!valid) return  alert('验证失败')
        // 验证成功  调用提交请求 添加角色
        // this.doAdd()
        this.isEdit?this.doEdit():this.doAdd()
      })
    },
    // 自定义新增函数   新增角色   一会提交的时候调用即可
     async doAdd(){
       try {
         const res = await addRole(this.roleForm)
         console.log('addRole', res)
         if(res.code!==10000) return this.$message.error(res.message)
         this.$message.success(res.message)
        //  添加成功  重新渲染页面 将页面值翻到最后一页 (前提是需要获取最大页面值)
        this.total++   //总数+1  因为拿到的是上次的数据还没刷新呢
        // 获取最大页面值  (用总数除以每页显示的条数  等于页码数)  调用Math.ceil() 向上取整
        const maxpage=  Math.ceil(this.total/this.pageParams.pagesize)
       
         this.$message.success('添加成功')
        
         // 保存数据
        //  将查询对象中的page修改为最大的页码值
        this.pageParams.page=maxpage
          this. loadRoles()  //重新渲染
         this.showDialog = false  //关闭弹窗
         this.resetForm() //重置表单
       } catch (err) {
         console.log('addRole', err)
       }
     },
    // 删除角色
      hDel(id){
      this.$confirm('你确定要删除吗?').then(async()=>{
      const res= await deleteRole(id)
      console.log('resdel',res);
       // 判断当前页面上是否只剩下一条数据 如果是,需要将当前的页面值减一
       if(this.rolesList.length===1){
         this.pageParams.page--  //当前页面减1
        //  页面值最小是1
        if( this.pageParams.page<=0){
           this.pageParams.page=1
        }
       }
      // 删除完毕重新渲染页面
      this. loadRoles()
      }).catch(error=>error)
     },
    // 分页功能的
     handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
         this.pageParams.page=1   //切换页面后从页码值从1开始
         this.pageParams.pagesize=val
         // 重新渲染页面
        this.loadRoles()
      },
      // 用户点击了页码
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.pageParams.page=val
        // 重新渲染页面
        this.loadRoles()
      },
    // 获取页面角色列表
    async loadRoles(){
      try {
        const res = await getRoles(this.pageParams)
        // console.log('getRoles', res) //res.data.rows  获取的是角色列表
        if(res.code!==10000) return this.$message.error(res.message)
         this.$message.success(res.message)
        // 保存数据 (角色列表)
        this.rolesList=res.data.rows
        // 保存总数
        this.total=res.data.total
      } catch (err) {
        console.log('getRoles', err)
      }
    },
  }
  
  
}
</script>